<template>
  <div>
    <van-nav-bar title="我的收藏" left-text="返回"  left-arrow @click-left="back" />
    <ul>
        <li v-for="item in list" :key="item.id" @click="detail(item)">
            <div class="dishname">{{item.authorId}} - {{item.name}}</div>
            <div class="dishlist">
                <img :src="'http://124.93.196.45:10001/' + item.imgUrl" alt="">
                <div class="ingredients">{{item.ingredients}}</div>
            </div>
            <div>
                <i @click.stop="collect(item)" :class="item.myCollectionState ? 'icon-shoucang1':'iconfont icon-shoucang'" ><span>{{item.collectionCount}}</span></i>
                
                <i @click.stop="like(item)" :class="item.myLikeState ? 'icofont icon-dianzan_kuai' : 'iconfont icon-dianzan'" ><span>{{item.likeCount}}</span></i>
                
                
            </div>
        </li>
    </ul>
  </div>
  
</template>

<script>
import mixin from  "@/mixin/flag";
import {dishesmine,disheslike,dishescollection} from "./Service"
export default {
    data(){
        return{
            list:[],
        }
    },
    mixins:[mixin],
    methods:{
        back(){
            this.$router.go(-1);
        },
        detail(item){
            this.$router.push(`/cook/detail/${item.id}`)
        },
        async collect(item){
            // console.log(res);
            if(!item.myCollectionState){
                item.myCollectionState=true;
                let res = await dishescollection({
                dishesId:item.id,
                newState:item.myCollectionState
                })
                console.log(res);
                this.dishesmine()
            }else{
                item.myCollectionState=false
                let res = await dishescollection({
                dishesId:item.id,
                newState:item.myCollectionState
                })
                console.log(res);
                this.dishesmine()
            }
        },
        async like(item){
                       
            if(!item.myLikeState){
                item.myLikeState=true
                let res = await disheslike({
                dishesId:item.id,
                newState:item.myLikeState,
            })
            console.log(res);
            this.dishesmine()
            }else{
                item.myLikeState=false
                let res = await disheslike({
                dishesId:item.id,
                newState:item.myLikeState,
            })
            console.log(res);
            this.dishesmine()
            }
        },
        async dishesmine(){
            let res = await dishesmine()
            console.log(res);
            this.list=res.data.rows
        }
        
    },
    created(){
        this.dishesmine()
    }
}
</script>

<style lang="scss" scoped>
ul{
    padding:20px;
    li{
        border: 1px solid #666;
        padding:20px;
        margin-bottom: 20px;
        .dishname{
            font-size:18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .dishlist{
            display: flex;
            margin-bottom: 10px;
            img{
                width: 100px;
                height: 100px;
            }
            .ingredients{
                flex:1;
                margin-left:15px;
                font-size: 16px;
                padding-top:20px;
            }
        }
        .icon-shoucang,.icon-shoucang1{
            font-size:20px;
            margin-right: 15px;
            font-weight: bold;
        }
        .icon-dianzan_kuai,.icon-dianzan{
            font-size:20px;
            font-weight: bold;
        }
        .icon-dianzan_kuai{
            color: red;
        }
        .icon-shoucang1{
            color:blue;
        }
        span{
                font-size:12px;
                line-height: 20px;
                margin-left: 5px;
            }
   
    }
}

</style>